<template>
    <div class="wrap">
      <!--pages/doctor/doctor.wxml-->
        <!-- <Header :navTitle="title" :showBack="showBack"></Header> -->
        <div class='top-search-wrap flex'>
            <div class='search-wrap flex'>
                <img src='../assets/search.png' class='search-img' @click="searchTap2()"></img>
                <input placeholder='输入不适症状，医生，科室等' type='text'  v-model="search" @keydown="searchTap($event)"></input>
                <div @click='resetTap' class='reset flex'>
                    <img src='../assets/reset.png'></img>
                </div>
            </div>
        </div>
        <div class='list-wrap column'>
            <div class='doctor-list column' v-for="(item,index) in illList" :key="index">
                <div class='classify flex'>
                    <img :src='item.icon'></img>
                    <span>{{item.department}}</span>
                </div>
                <div class='ill-list flex'>
                    <div class='ill-item flex' v-for="(items,key) in item.illness" :key='key' @click='goSearch(items)'>{{items}}</div>
                </div>
            </div>
        </div>
        <!-- 加载中 -->
        <div class='loading column' v-if="showLoading">
            <img src='../assets/load.gif'></img>
            <p>拼命加载中...</p>
        </div>
        <Bar :active='active'></Bar>
    </div>
</template>

<script>
import Bar from "./Bar";
import Header from "./header";
import { getillness } from "./../api/index";
export default {
    data(){
        return{
            title: "名医",
            showBack: false,
            active:'doctor',
            flag: true,//防止多次跳转的变量
            search:'',//搜索框输入的内容
            illList:[],//病症数组
            showLoading:true,
            outTime:1500
        }
    },
    components: {
        Bar,
        Header
    },
    created(){
        let mstr = sessionStorage.getItem('mstr')
        getillness(mstr).then((res)=>{
            if(res.data.status === 1){
                this.illList = res.data.data
            }else{
                this.illList = []
            }
            this.showLoading = false
        })
    },
    methods:{
        //清空搜索框
        resetTap(){
            this.search = ''
        },
        searchTap(e){
            if(e.keyCode === 13){
                this.goSearch(this.search)
            }
        },
        searchTap2(){
            this.goSearch(this.search)
        },
        //去搜索
        goSearch(items){
            this.$router.push({
                name:`doctorList`,
                params:{
                    keyword:items
                }
            })
        }
    },
    props: {

    }
};
</script>

<style lang="scss" scoped>
@import "../base/css/_base.scss";
/* pages/doctor/doctor.wxss */
.wrap{
    background: #fff;
}
.top-search-wrap{
    padding: torem(15px) torem(30px);
    background: #fff;
    height: torem(100px);
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}
.top-search-wrap .search-wrap{
    height: torem(70px);
    width: 100%;
	background-color: #fff;
	border-radius: torem(10px);
	border: solid 1px #886949;
    color: #333;
    font-size: torem(30px);
    align-items: center; 
}
.top-search-wrap .search-wrap .search-img{
    width: torem(38px);
    height: torem(38px);
    margin:0 torem(28px) 0 torem(18px);
}
.top-search-wrap .search-wrap  input{
    flex: 1;
    height: 100%;
    background-color: #fff;
    color:#333;
    font-size: torem(30px);
}
.search-wrap .reset{
    width: torem(60px);
    height: 100%;
    align-items: center;
    justify-content: center;
}
.search-wrap .reset img{
    width: torem(32px);
    height: torem(32px);
}
.list-wrap{
    padding: torem(100px) 0 torem(100px) torem(30px);
}
.doctor-list .classify{
    color: #333333;
    font-size: torem(28px);
    align-items: center;
    margin-bottom: torem(10px);
    padding: torem(30px) 0;
}
.doctor-list .classify img{
    width: torem(39px);
	height: torem(39px);
    margin-right: torem(12px);
}
.doctor-list .ill-list{
    flex-wrap: wrap;
}
.doctor-list .ill-list .ill-item{
    color: #333333;
    font-size: torem(28px);
    padding: torem(15px) torem(17px);
    border:1px solid #cccccc;
    border-radius: torem(6px);
    margin-bottom: torem(30px);
    margin-right: torem(30px);
    min-width: torem(130px);
    justify-content: center;
}
.doctor-list .ill-list .ill-item.hover{
    background: RED
}
</style>